<template>
  <div>
      <div class="search">
        <div class="content">
          <span @click="moreCity" class="title one-line">{{cityName || '北京'}}</span>
          <van-icon name="play" />
           <div class="input">
             <van-icon name="search" />
             <input type="text" placeholder="请输入小区或地址">
           </div>
        </div>
       <van-icon name="location-o" @click="$router.push('/map')" />
      </div>
  </div>
</template>

<script>
export default {
  name: 'Title',
  data () {
    return {
      cityName: localStorage.getItem('city') || '北京'
    }
  },
  methods: {
    moreCity () {
      this.$router.push('/city')
    }
  }

}
</script>

<style lang="less" scoped>
// 搜索框
  .search{
    display: flex;
    align-items: center;
    height: 38px;
    width: 340px;
    .content{
      display: flex;
      align-items: center;
      background-color: #fff;
      width: 310px;
      height: 30px;
      margin: 0 10px;
      padding: 5px 8px;
      border-radius: 3px;
      .title{
      font-size: 14px;
      width: 30px;
      padding-bottom: 2px;
      color: #333;
      }
      .input{
      display: flex;
      align-items: center;
      margin-left: 20px;
      border-left: 1px solid #9c9fa1;
      padding: 0 10px ;
      margin: 0 15px;
      font-size: 15px;
      .van-icon-search{
        font-size: 17px;
        width: 20px;
        height: 20px;
        color: #9c9fa1;
      }
      input{
      // flex: 1;
      width: 130px;
      border: none;
      height: 20px;
      padding: 0 0 2px;
        font-size: 14px;
      &::placeholder{
        color: rgb(196, 243, 211);
      }
      &:focus{
        color: rgb(149, 250, 250);
      }
    }
    }
    .van-icon-play{
       transform: rotate(90deg);
       font-size: 12px;
       color: rgb(136, 133, 133);
     }
   }
   .van-icon-location-o{
    font-size: 25px;
   }

}
</style>
